<template>
  <div>
    <el-input
      v-if="'text' === item.type"
      class="form-input" 
      :name="item.name" 
      :class="item.name"
      :placeholder="item.text"
      :style="item.style"
      icon="circle-cross"
      v-model="item.value"
      :on-icon-click="handleIconClick"
    ></el-input>
    <template v-if="'datePicker' === item.type">
      <el-date-picker
        v-if="'daterange' == item.pickerType"
        key="daterange"
        type="daterange"
        class="form-input" 
        :name="item.name" 
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-date-picker
        v-else-if="'month' == item.pickerType"
        key="month"
        type="month"
        class="form-input" 
        :name="item.name" 
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
      >
      </el-date-picker>
      <el-date-picker
        v-else-if="'year' == item.pickerType"
        key="year"
        type="year"
        class="form-input" 
        :name="item.name" 
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
      >
      </el-date-picker>
      <el-date-picker
        v-else
        key="datetimerange"
        type="datetimerange"
        class="form-input" 
        :name="item.name" 
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :format="item.format"
        :propName="item.propName"
        v-model="item.value"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </template>
    <template v-if="'timePicker' === item.type">
      <el-time-picker
        is-range
        class="form-input" 
        :name="item.name" 
        :class="item.name"
        :placeholder="item.text"
        :style="item.style"
        :propName="item.propName"
        v-model="item.value"
      >
      </el-time-picker>
    </template>
    <el-select
      v-if="'select' === item.type"
      class="form-input" 
      :name="item.name" 
      :class="item.name"
      :placeholder="item.text"
      :style="item.style"
      v-model="item.value"
      @change="handleChange(item)"
    >
      <el-option
        v-for="(it, idx) in item.options" 
        :label="it.isNotInter ? it.name : it.name"
        :value="it.value"
      >
      </el-option>
    </el-select>
    <div class="double-input-box" v-if="'doubleInput' === item.type">
      <el-input
        class="form-input"
        :name="item.names[0]" 
        :class="item.names[0]"
        placeholder="≤"
        :style="item.style"
        v-model="item.values[0]"
      ></el-input>
      <span class="seprate-span">{{item.seperator ? item.seperator : '-'}}</span>
      <el-input
        class="form-input"
        :name="item.names[1]" 
        :class="item.names[1]"
        placeholder="≤"
        :style="item.style"
        v-model="item.values[1]"
      ></el-input>
    </div>
  </div>
</template>

<script>
import common from '../../mixins/common.js'
import {formatTen} from '../../assets/js/help.js'
export default {
  mixins: [common],
  props: {
    dataObj: Object
  },
  data () {
    return {
      item: this.dataObj,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', [
              new Date(moment().format('YYYY-MM-DD 00:00:00')), 
              new Date(moment().format('YYYY-MM-DD 23:59:59'))]);
          }
        },{
          text: '昨天',
          onClick(picker) {
            picker.$emit('pick', [
              new Date(moment().subtract(1,'day').format('YYYY-MM-DD 00:00:00')), 
              new Date(moment().format('YYYY-MM-DD 23:59:59')) ]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            picker.$emit('pick', [
              new Date(moment().subtract(7,'day').format('YYYY-MM-DD 00:00:00')), 
              new Date(moment().format('YYYY-MM-DD 23:59:59')) ]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            picker.$emit('pick', [
              new Date(moment().subtract(30,'day').format('YYYY-MM-DD 00:00:00')), 
              new Date(moment().format('YYYY-MM-DD 23:59:59')) ]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            picker.$emit('pick', [
              new Date(moment().subtract(90,'day').format('YYYY-MM-DD 00:00:00')), 
              new Date(moment().format('YYYY-MM-DD 23:59:59')) ]);
          }
        }]
      }
    }
  },
  methods: {
    handleIconClick () {
      this.item.value = '';
    },
    handleChange (Item) {
      let isHandleChange = Item.isHandleChange;
      if(isHandleChange) {
        this.$emit('handleChange', Item);
      }
    }
  }
}
</script>

<style lang="less">
@import '../../assets/less/base/variables.less';
@import '../../assets/less/mixins/border-radius.less';

.input-group-addon{
  display: inline-block;
  padding: 0px;
  height: @inputH;
  vertical-align: top;
  .single-list {
    width: auto;
    border: none;
    // height: 28px;
    // padding: 0px 8px;
    padding: 0;
    color: @lightBlack;
    background-color: @greyee;
    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border: 0;
      height: 28px;
      line-height: 28px;
    }
  }
}

.form-group .double-input-box {
  border: 1px solid @greydd;
  // border-left: 0;
  font-size: 14px;
  .border-right-radius(4px);
  &:hover {
    border-color: @green;
  }
  .seprate-span {
    display: inline-block;
    width: 16px;
    height: 28px;
    line-height: 28px;
    color: @lightBlack;
    text-align: center;
    vertical-align: top;
  }
  .form-input {
    min-width: 60px;
    &:first-child {
      .el-input__inner {
        .border-right-radius(0px);
        border-right: 1px solid @greydd;
        &:focus {
          border-color: @green;
        }
      }
    }
    &:last-child {
      .el-input__inner {
        .border-left-radius(0px);
        border-left: 1px solid @greydd;
        &:focus {
          border-color: @green;
        }
      }
    }
  }
  .el-input__inner {
    border: 0;
    height: 28px;
    line-height: 28px;
    &:focus {
      border-color: @green;
    }
  }
}
</style>